<template>
  <div>
    <!--工具类-->
    <Row v-has=tRole.CHAT_1_101>
      <i-col span="24" class-name="y_query_right">
        <Button type="success" style="" icon="ios-paper-plane" class="y_condition" @click="msgAccountShow" >推送消息
        </Button>
      </i-col>
      <divider/>
    </Row>
    <Row >
      <i-col span="24" class-name="y_query_right">
          <Input v-model.trim="searchParams.userName" placeholder="请输入用户名"
                 class="y_condition" clearable></Input>
          <Input v-model.trim="searchParams.userId" placeholder="请输入用户id"
                 class="y_condition" clearable></Input>
          <Input v-model.trim="searchParams.token" placeholder="请输入用户token"
                 class="y_condition" clearable></Input>
          <Button type="primary" class="y_condition" icon="md-search" @click="search" >查询历史推送
          </Button>
      </i-col>
    </Row>

    <!--表格和分页-->
    <Table stripe border ref="userInfo" :columns="tableTitles"
           :data="messageList" class="table_css"
           no-data-text="暂无数据" ></Table>

    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80]"
            show-sizer show-elevator/>
    </div>
    <!-- 消息详请 -->
    <Modal
      v-model="status.modalMessageSend.isShow "
      title="消息推送"  :scrollable=true style="width: 50%">
      <div slot="footer">
        <Button type="primary" style="" @click="sendMessage" >立即推送
        </Button>
      </div>
      <Form :model="messageSendParam"  :rules="messageSendRule" :label-width="100"
            ref="sendMessageForm"  style="margin: 1rem 0px"  >

            <FormItem label="标题 :" prop="title">
              <Input v-model.trim="messageSendParam.title" placeholder="请输入" style="width: 300px"
                     class="form_step"></Input>
            </FormItem>
            <FormItem label="正文 :" prop="content">
              <Input type="textarea" rows=8 style="width: 300px" v-model.trim="messageSendParam.content" placeholder="请输入" class="form_step" ></Input>
            </FormItem>
      </Form>
    </Modal>
    <!-- 消息发送人列表 -->
    <Modal
      v-model="status.modalMessageAccount.isShow"
      title="消息推送人" :styles="{align:'center',width: '50%'}"
      :mask-closable="false" :scrollable=true>
      <div slot="footer"></div>
      <div class="message_detail">
        <Row style="padding-top: 10px;text-align: left">
          <i-col span="20">
            <div>
              <Input v-model.trim="messageAccountParam.firstName" placeholder="请输入用户名"
                     class="y_condition" clearable></Input>
              <Button type="primary" class="y_condition" icon="md-search" @click="searchAccount" >查询
              </Button>
              <span>&nbsp;</span>
            </div>
          </i-col>
        </Row>
        <Alert style="margin-top: 10px;text-align: left" type="warning" show-icon>推送令牌未生成或用户主动关闭了通知权限时，无法即时的推送给用户。仅当用户下次打开APP或者PC账户时才会收到提示</Alert>
        <!--表格和分页-->
        <Table stripe border ref="userInfo" :columns="tableAccountTitles"
               :data="accountList" class="table_css"
               no-data-text="暂无数据" ></Table>
      </div>
    </Modal>
    <!-- 消息详请 -->
    <Modal
      v-model="status.modalMessageDetail.isShow"
      :title="'推送给 '+messageDetail.user.name+' 的消息详情' "
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div class="message_detail">

        <Row style="margin: 0.8rem 0rem">
          <i-col span="3" class="tiy_class_key">标题 :</i-col>
          <i-col span="21">{{messageDetail.title}}</i-col>
        </Row>
        <Row style="margin: 0.8rem 0rem">
          <i-col span="3" class="tiy_class_key">正文 :</i-col>
          <i-col span="21">{{messageDetail.content}}</i-col>
        </Row>
        </div>
    </Modal>

    <!-- 发送邮件 -->
    <Modal
      v-model="showEmailState.isShowing"
      title=""
      :mask-closable="false"
      :styles="{top: '20px',bottom:'20px',width:'70%'}">
      <send-email v-bind:receiveUser="showEmailState.selectedUsers" :is-send="false"  v-bind:isRefresh="showEmailState.isShowing" ref="SendEmail"></send-email>
      <div slot="footer"></div>
    </Modal>

    <!-- 图片 -->
    <Modal
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}"
      :scrollable=true>
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px" /></div>
    </Modal>
  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "view-design/src/components/grid/col";
  import SendEmail from "../email/SendEmailTemplate.vue"
  import tiyData from "./js/message/user_message_data";
  import {
    init,
    webList,
    sendMessage,
    messageDetail,
    msgAccountList
  } from "./js/message/user_message_funs"

  export default {
    //components: {ICol},
    components: {ICol,SendEmail},

    data(){
      return {
        tRole:{
          CHAT_1_101:"CHAT-1-101",
          CHAT_1_201:"CHAT-1-201"
        },
        tPage: tiyData.tPage,
        status: tiyData.tStatus,
        //搜索条件
        searchParams: tiyData.tParams.searchParams,
        messageAccountParam: tiyData.tParams.messageAccountParam,
        messageSendParam: tiyData.tParams.messageSendParam,
        pushPlatformDict: this.$store.getters.dictionaries.pushPlatformDict,
        messageTypeDict: this.$store.getters.dictionaries.messageTypeDict,
        tData: tiyData.tData,
        messageSendRule: tiyData.tStatus.rules,
        messageList: tiyData.tData.messageList,
        accountList: tiyData.tData.accountList,
        messageDetail:tiyData.tStatus.modalMessageDetail.message,
        choosedTargetUser: [],
        tableTitles:tiyData.tableTitles(this,tiyData),
        tableAccountTitles:tiyData.tableAccountTitles(this,tiyData),
        showEmailState:{// 发送邮件相关的状态
          isShowing:false,
          selectedUsers:[// 测试数据
            {
              contactEmail:"gcc@fashiontiy.com",
              id:"Inked",
              encodeName:"Pro",
            },
          ],
        }
      }
    },
    computed : {

    },

    methods: {

      search(){
        tiyData.tPage.currentPage = 1;
        webList(this, tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      showDetail(index){
        tiyData.tParams.messageDetailParam.messageId = tiyData.tData.messageList[index].id
        messageDetail(this,tiyData)
      },
      sendMessageShow(index){
        let user = tiyData.tData.accountList[index]
        tiyData.tParams.messageSendParam.userId = user.userId;
        tiyData.tParams.messageSendParam.userName = user.userName;
        tiyData.tParams.messageSendParam.token = user.messageAccount;
        tiyData.tParams.messageSendParam.title = "";
        tiyData.tParams.messageSendParam.content = "";
        tiyData.tStatus.modalMessageSend.isShow = true;
      },
      msgAccountShow(){
        tiyData.tParams.messageAccountParam.firstName = "";
        tiyData.tData.accountList.length = 0;
        tiyData.tStatus.modalMessageAccount.isShow = true;
      },
      sendMessage(){
        sendMessage(this,tiyData)
      },
      getPlatform(platform){
        let value = "";
        this.pushPlatformDict.forEach(function (item) {
          if(item.value == platform){
            value = item.name;
          }
        })
        return value
      },
      getType(type){
        let value = "";
        this.messageTypeDict.forEach(function (item) {
          if(item.value == type){
            value = item.name;
          }
        })
        return value
      },
      searchAccount(){
        msgAccountList(this,tiyData)
      },
      showEmail(index){
        this.showEmailState.selectedUsers.length = 0;
        let selectUser=tiyData.tData.userList[index];
        let user = {
          "id": selectUser.id,
          "encodeName": selectUser.encodeName,
          "contactEmail":selectUser.virtualName,
        };
        this.showEmailState.selectedUsers.push(user);
        this.showEmailState.isShowing = true;
      }
    },
    mounted(){
      init(this, tiyData);
      // webList(this, tiyData);
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional) "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input{
    width: 180px;
    margin-right: 10px;
  }
  .form_step{
    width: 250px;
    margin-right: 10px;
  }
  .modal_active_form{
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .tiy_class_key {
    color:#9e9e9e;
    display:inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }

  .message_detail {
    padding: 1rem;
  }
</style>
